<template>
  <a-form :form="form">
    <div v-for="(item, index) in empFamily.empFamilyList" :key="item.guid || item.id">
      <a-col :span="10">
        <a-form-item label="成员姓名" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.name }}</span>
          <a-input v-decorator="[`name-${index}`, { initialValue: item.name }]" v-else @change="change($event, index, 'name')" />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="与我的关系" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.relation }}</span>
          <a-input
            v-decorator="[`relation-${index}`, { initialValue: item.relation }]"
            @change="change($event, index, 'relation')"
            v-else
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="联系电话" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.phone }}</span>
          <a-input
            v-decorator="[
              `phone-${index}`,
              {
                rules: [
                  { required: true, message: '联系电话必填' },
                  {
                    pattern: /^1[3456789]\d{9}$/,
                    message: '请正确输入手机号！'
                  }
                ],
                initialValue: item.phone
              }
            ]"
            v-else
            @change="change($event, index, 'phone')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="工作单位" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.workUnit }}</span>
          <a-input
            v-decorator="[`workUnit-${index}`, { initialValue: item.workUnit }]"
            v-else
            @change="change($event, index, 'workUnit')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <a-input v-decorator="[`id-${index}`, { initialValue: String(item.id) }]" type="hidden" />
        </a-form-item>
      </a-col>
      <a-col v-if="!disable" :span="17" class="mb24">
        <a-button type="dashed" style="width:100%;height:44px;" @click="delHandle(item)">删除</a-button>
      </a-col>
      <a-col v-if="index != empFamily.empFamilyList.length - 1" :span="17" class="border-top mb12"></a-col>
    </div>
    <div v-if="!disable">
      <a-col :span="17" class="border-top"></a-col>
      <a-col :span="17" class="mt24 mb24">
        <a-button type="dashed" style="width:100%;height:44px;" @click="addHandle">新增</a-button>
      </a-col>
      <a-col :span="23">
        <div class="basicInfo-button-group">
          <a-button class="mr12" @click="cancel">取消</a-button>
          <a-button type="primary" @click="submit">确认</a-button>
        </div>
      </a-col>
    </div>
  </a-form>
</template>
<script>
import { validPhone } from "@/utils/validate";
import { updateEmpAllInfo } from "@/api/staff/staff";
export default {
  name: "FamilyForm",
  props: {
    empFamily: {
      type: Object
    },
    disable: {}
  },
  data() {
    return {
      validPhone,
      form: this.$form.createForm(this),
      relationOptions: [{ value: "父母" }, { value: "配偶" }, { value: "子女" }, { value: "朋友" }, { value: "其他" }]
    };
  },

  watch: {
    empFamily() {
      if (this.empFamily.empFamilyList == null || this.empFamily.empFamilyList.length === 0) {
        this.$set(this.empFamily, "empFamilyList", [{}]);
      }
    }
  },
  methods: {
    change(e, index, key) {
      this.$set(this.empFamily.empFamilyList, index, {
        ...this.empFamily.empFamilyList[index],
        [key]: e.target.value
      });
    },
    change1(e, index, key) {
      this.$set(this.empFamily.empFamilyList, index, {
        ...this.empFamily.empFamilyList[index],
        [key]: e
      });
    },
    cancel() {
      this.$emit("cancelEdit");
      if (this.empFamily.empFamilyList || this.empFamily.empFamilyList.length === 0) {
        this.empFamily.empFamilyList.push({ guid: Math.random() * 16 });
      }
    },
    addHandle() {
      if (this.empFamily.empFamilyList === null) {
        this.empFamily.empFamilyList = [];
      }
      this.empFamily.empFamilyList.push({ guid: Math.random() * 16 });
    },
    delHandle(item) {
      const index = this.empFamily.empFamilyList.indexOf(item);

      if (index !== -1) {
        this.empFamily.empFamilyList.splice(index, 1);
      }
    },
    getMoment(date) {
      return date ? this.moment(date) : null;
    },
    submit() {
      var that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          const value = this.beautyData(values);

          setTimeout(() => {
            updateEmpAllInfo({
              id: this.empFamily.id,
              phone: this.empFamily.phone,
              empFamilyList: value
            }).then(res => {
              that.$notification["success"]({
                message: "success",
                description: "编辑成功"
              });
              that.$emit("cancelEdit");
            });
          }, 300);
        }
      });
    },
    beautyData(data) {
      var arr = [];
      this.empFamily.empFamilyList.forEach((item, index) => {
        arr[index] = {
          relation: data[`relation-${index}`],
          name: data[`name-${index}`],
          phone: data[`phone-${index}`],
          workUnit: data[`workUnit-${index}`],
          // "startTime": this.getMoment(data[`startTime-${index}`]),
          // "endTime": this.getMoment(data[`endTime-${index}`]),
          // "isFirstEdu": data[`isFirstEdu-${index}`],
          id: data[`id-${index}`]
        };
      });
      return arr;
    }
  }
};
</script>

<style scoped>
.basicInfo-button-group {
  text-align: center;
  padding-bottom: 24px;
}
</style>
